<template>
  <div class="play-ctr">
    <div class="left" @click="isShow = true">
      <img :src="playList[playCurrentIndex].al.picUrl" />
      <div class="content">
        <div class="title">{{playList[playCurrentIndex].name}}</div>
        <div class="tips">横滑可切换上/下首歌</div>
      </div>
    </div>

    <div class="right">
      <svg class="icon" aria-hidden="true" @click="play">
        <use :xlink:href="isPlay? '#icon-zanting1': '#icon-bofang1'" />
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gengduo" />
      </svg>
    </div>
    <play-music :isPlay="isPlay" :play="play" :playMusic="playList[playCurrentIndex]" v-show="isShow" @back="isShow = false"></play-music>
    <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playCurrentIndex].id}.mp3`"></audio>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import PlayMusic from './PlayMusic.vue'

export default {
  components: { PlayMusic },
  data() {
    return {
      isPlay: false,
      isShow: false
    }
  },
  computed: {
    ...mapState(['playList', 'playCurrentIndex'])
  },
  mounted() {
    this.$store.dispatch('reqLyric', { id: this.playList[this.playCurrentIndex].id })
  },
  updated() {
    this.$store.dispatch('reqLyric', { id: this.playList[this.playCurrentIndex].id })
  },
  methods: {
    play() {
      if (this.$refs.audio.paused) {
        this.$refs.audio.play()
        this.isPlay = true
      } else {
        this.$refs.audio.pause()
        this.isPlay = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.play-ctr {
  border-top: 1px solid rgb(197, 196, 196);
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1rem;
  width: 7.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9;
  .left {
    display: flex;
    align-items: center;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 0.4rem;
      margin: 0 0.15rem;
    }
    .content {
      display: flex;
      flex-direction: column;
      .title {
        font-size: 0.3rem;
        margin-bottom: 0.03rem;
      }
      .tips {
        font-size: 0.2rem;
        color: #999;
      }
    }
  }
  .right {
    .icon {
      width: 0.5rem;
      height: 0.5rem;
      margin-right: 0.3rem;
      fill: #666;
    }
  }
}
</style>